<template>
    <div style="width:100%;height:100%;" id="screen-Content"
        :class="[isTemplate && 'template-view-box', option.mode != 'edit' && !isTemplate && 'view-file-office']">
        <div id="monitorOffice" v-if="option.mode == 'edit'"></div>
        <div id="monitorOfficeView" v-else></div>
    </div>
</template>

<script setup lang="ts">
import {
    ref,
    watch,
    onMounted,
    nextTick,
    onBeforeUnmount
} from 'vue'
import { handleDocType } from '@/utils/handleDocType'
import { getStore } from "@/utils/store";


const emit = defineEmits(["windowOpen"])
const props = defineProps({
    option: {
        type: Object,
        default() {
            return {
                mode: "edit",
                url: "1234567890",
                fileType: "docx",
                id: "2345678",
                title: "23456780987",
            }
        }
    },
    isTemplate: {
        type: Boolean,
        default: false
    },
    knowledgeInfo: {
        type: Object,
        default() {
            return {}
        }
    }
})
const docType = ref('')
const docEditor = ref(null)
const isShow = ref(false)
const userIno = ref({})

onMounted(() => {
    userIno.value = getStore({ name: "userInfo" });
    if (props.option.url && !docEditor.value) {
        nextTick(() => {
            setEditor(props.option)
        })
    }
})
watch(() => props.option, (newVal, oldVal) => {
    if (newVal.id != oldVal.id) {
        nextTick(() => {
            setEditor(newVal)
            docType.value = handleDocType(newVal.fileType)
        })
    }
}, { deep: true })
onBeforeUnmount(() => {
    if (docEditor.value !== null) {
        docEditor.value.destroyEditor();
        docEditor.value = null;
    }
})
function init() {
    isShow.value = true
    nextTick(() => {
        setEditor(props.option)
    })
}
function desTroy() {
    isShow.value = false
    if (docEditor.value !== null) {
        docEditor.value.destroyEditor();
        docEditor.value = null;
    }
}
function setEditor(option, keyAppend = '') {
    // debugger
    docType.value = handleDocType(option.fileType)
    docEditor.value = new DocsAPI.DocEditor(option.mode == 'view' ? "monitorOfficeView" : "monitorOffice", {
        document: {
            "lang": "zh",
            "fileType": "docx",
            "key": "-965559291",
            "title": "新建文件.docx",
            "permissions": {
                "comment": true,
                "download": false,
                "modifyContentControl": true,
                "modifyFilter": true,
                "print": true,
                "edit": true,
                "fillForms": true,
                "review": true
            },
            "info": {},
            "url": "https://jvsoss.bctools.cn/document-mgr/ten_1/2_2/document-mgr/hw/新建文件.docx/2024/08/13/2024-08-131008081057406160896-1ed5c6e2af0341c3acbd6167a8fcbd67.office_doc.docx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20240813T103758Z&X-Amz-SignedHeaders=host&X-Amz-Expires=604800&X-Amz-Credential=miniominio/20240813/us-east-1/s3/aws4_request&X-Amz-Signature=76fcfdfaaf82cb995ee281d57d7b893241579c9d08581c67ec4ee295d350ff83"
        },
        documentType: 'word',
        mode: "edit",
        editorConfig: {
            "actionLink": null,
            "mode": "edit",
            "callbackUrl": "https://knowledge.bctools.cn/mgr/document/no/auth/only/office?id=41dd2e3985b63d286584117ddd357f5b&userId=9680c30c81b5b08137842df61b51c8c3&userName=用户rvjsw00&isTemple=false&tenantId=1",
            "lang": "zh",
            "user": {
                "group": "",
                "id": "9680c30c81b5b08137842df61b51c8c3",
                "name": "用户rvjsw00"
            },
            "customization": {
                "logo": {
                    "image": "https://jvsoss.bctools.cn/jvs-public/jvs-auth-mgr/2_1_8/1/application/2024/03/08/2024-03-08950809363759403008-86d5bf057d4bdc12ed6d4341e84e118.png",
                    "imageDark": "https://jvsoss.bctools.cn/jvs-public/jvs-auth-mgr/2_1_8/1/application/2024/03/08/2024-03-08950809363759403008-86d5bf057d4bdc12ed6d4341e84e118.png",
                    "url": "https://knowledge.bctools.cn/#/"
                },
                "help": false,
                "feedback": false,
                "about": false,
                "forcesave": false,
                "submitForm": false,
                "spellcheck": true,
                "plugins": false
            },
            "plugins": {
                "pluginsData": []
            }
        },
        events: {
            onAppReady: () => {
                console.log("初始化成功")
                emit("windowOpen")
            },
        },
        type: "desktop",
        width: "100%",
        height: "100%"
    });
}
function reSetEditor() {
    if (docEditor.value !== null) {
        docEditor.value.destroyEditor();
        docEditor.value = null;
    }
    init()
}
defineExpose({
    reSetEditor,
    desTroy,
    init
})
</script>
<style lang="scss" scoped>
.template-view-box {
    height: calc(100vh - 252px) !important;
}

.view-file-office {
    height: calc(100vh - 200px) !important;
}
</style>